<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    //问题: vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题
    // 如何解决浏览器刷新数据丢失问题呢？
    //解决方法: 全局监听，页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，然后从sessionStorage 中获取，再赋值给 store ，并移除 sessionStorage 中的数据
    // console.log(window.location.href.indexOf('resumeDetails?personId'))
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('list', JSON.stringify(this.$store.state))
      if (window.location.href.indexOf('resumeDetails?') !== -1) {
        sessionStorage.setItem('fullpath', window.location.href)
      }
    })
    try {
      sessionStorage.getItem('list') &&
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem('list'))
          )
        )
    } catch (err) {
      console.log(err)
    }
    sessionStorage.removeItem('list')
  },
}
</script>
